<template>
  <div class="history-content">
    <div class="header">
      <div class="left" @click="Suk_back">
        <van-icon name="arrow-left"/>
      </div>
      <div class="middle">
        <div class="iptbox">
          <input placeholder="搜索商家，商品名称" class="searchipt" v-model="searchvalue">
        </div>
      </div>
      <div class="right" @click="Suk_tosearch">搜索</div>
    </div>
    <div>
      <h1 class="historysearchtit">历史搜索</h1>
      <div v-for="(item,index) in items" :key="index" class="historylist" @click="Suk_checkhis(index)">{{ item.concent }}</div>
    </div>
    <div>
      <h1 class="historysearchtit">热门搜索</h1>
      <div v-for="(item,index) in list" :key="index" class="historylist" @click="Suk_checkhot(index)">{{ item.productName }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchvalue: "",
      list: [
        // 这是我们的热门搜
      ],
      items: [] //这是我们的历史搜索
    };
  },
  beforeCreate: function() {
    //创建前
  },
  created: function() {
    this.Suk_gethistory();
    this.Suk_getlist();
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    Suk_tosearch() {
      let that = this
      that.$emit('sendsearch',that.searchvalue)
      localStorage.setItem('sendsearch',that.searchvalue)
      that.$router.go(-1)
    },
    // 这是我们的历史搜索的操作
    Suk_gethistory() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid")
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/messages/queryList",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data.data);
              if(res.data.data == '查询失败'){
                  that.items = ''
              }else{
                  that.items = res.data.data;
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    //   这里是查询热门搜索
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {};
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/product/queryCount",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              if(res.data.data == '查询失败'){
                  that.list = ''
              }else{
                  that.list = res.data.data;
              }
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    //   这里是返回操作
    Suk_back() {
      this.$router.go(-1);
    },
    // 下面的是我们的点击历史查询操作
    Suk_checkhis(index){
        let that = this
        console.log(index)
        that.searchvalue = that.items[index].concent
        localStorage.setItem('sendsearch',that.searchvalue)
        that.$router.go(-1);
    },
    // 热门搜索
    Suk_checkhot(index){
        let that = this
        console.log(that.list[index])
        that.searchvalue = that.list[index].productName
        localStorage.setItem('sendsearch',that.searchvalue)
        that.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.history-content {
  font-size: 0.3rem;
  width: 90%;
  margin: 0 auto;
}
.header {
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  align-items: center;
}
.searchipt {
  border: none;
  background: #ededed;
  font-size: 0.3rem;
}

.iptbox {
  display: flex;
  width: 8rem;
  align-items: center;
  justify-content: center;
  align-items: center;
  background: #ededed;
  border: 1px solid #a8a8a8;
  height: 0.9rem;
  border-radius: 0.3rem;
}
.left {
  display: inline-block;
}
.right {
  display: inline-block;
}
.historylist {
  margin-top: 0.3rem;
  display: inline-block;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin-left: 0.5rem;
  text-align: center;
  background: #ededed;
  color: #888;
  border-radius: 0.2rem;
}
.historysearchtit {
  font-size: 0.4rem;
  font-weight: 500;
  margin-top: 0.5rem;
}
</style>
